<template>
	<view style="height: 100vh;background-color: #f7f7f7;">
		<view class="natos">

			<view class="natos1" style="color: #CCC;" v-if="departDate==currentDate">
				上一日
			</view>
			<view class="natos1" v-else @click="prevDate()">
				上一日
			</view>
			<view class="natos2">
				<view class="picker" style="font-size: 24upx;text-align: center;"
					@click="open">
					<text class="iconfont iconriqi1" style="margin-right: 10upx;">
					</text><text class="boxAys_1x">{{yue}}</text>月<text class="boxAys_1x">{{ri}}</text>日 <text
						style="font-size: 26upx;font-weight: 500;margin-left: 10upx;">{{dayOfWeek}}</text>
				</view>
			</view>
			<uv-calendars :color="'#4374eb'" :round="15" ref="calendar" @confirm="confirmA" :startDate="currentDate" :date="departDate"
				></uv-calendars>
			<view class="natos1" @click="nextDate">
				下一日
			</view>
		</view>
		<scroll-view scroll-y="true" class="contsss" :show-scrollbar="true" style="
		 height:calc(100vh - 65upx)  ">
			<view class="" style="height: 25upx;" v-if="array.length>0">

			</view>
			<view class="home_2y" v-for="(item,index) in array" :key="index" @tap="readArticle(item)"
				v-if="array.length>0">
				<view class="home_2y_1">
					{{item.startStation}}
					<text class="iconfont icondanxiangzhuanhuan"
						style="color: #999;margin: 0 10upx;"></text>{{item.endStation}}
				</view>
				<view class="pingche">会员报名</view>
				<view class="home_2y_2">
					<text class="home_2y_2_1"></text><text class="home_2y_2_2">{{item.departTime}}</text>
					<text style="margin-left: auto;font-size: 26upx;" v-if="item.unsoldSeats">余票：</text><text style="font-size: 28upx;color:#4374eb ;padding-right: 18upx;font-weight: 500;" v-if="item.unsoldSeats">{{item.unsoldSeats||'0'}}</text>
				</view>
				<view class="home_2y_3">
					<view class="home_2y_3x">
						下车点：{{item.priceName}}
					</view>
					<view class="home_2y_3y">
						<text class="home_2y_3y_1">¥ </text>
						<text class="home_2y_3y_2">{{item.price.toFixed(2)}} </text>
					</view>
				</view>
			</view>
			<view class="" v-if="array.length>5"
				style="padding-bottom: 18upx; font-size: 26upx;text-align: center;color: #666;">
				已经到底啦～
			</view>
			<view class="NoData" v-if="array.length==0">
				<view class="NoDataA">
					<image class="NoData_images" src="@/static/imge/zanwu.svg"></image>
				</view>
				<view class="NoData_texte1">
					亲，当前暂无活动内容
				</view>
				<view class="NoData_texte2">可以先看看别的哦～</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				array: [],
				departDate: '',
				form: {},
				yue: '',
				ri: '',
				dayOfWeek: ''
			}
		},
		onLoad: function(options) {
			var data = JSON.parse(options.id)
			this.form = data
			this.departDate = data.departDate
			this.reserveMask(data)
			this.timeDate(this.departDate)
		},
		computed: {
			...mapState(['currentDate']),
		},
		methods: {
			...mapMutations(['getData']),
			readArticle(e) {
				uni.navigateTo({
					url: '/pagesA/canhuixinxi/canhuixinxi?id=' + JSON.stringify(e)
				})
			},
			open() {
				this.$refs.calendar.open();
			},
			timeDate(Dates) {
				if (Dates) {
					let parts = Dates.split("-");
					this.yue = parts[1]
					this.ri = parts[2]
					const specifiedDate = new Date(Dates);
					// 获取这个指定日期是星期几
					const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
					this.dayOfWeek = days[specifiedDate.getDay()];
				}
			},
			confirmA(e) {
				this.departDate = e.fulldate
				this.form.departDate = this.departDate
				this.timeDate(this.departDate)
				this.reserveMask(this.form)
			},
			prevDate() {
				//前一天
				let odata = new Date(
					//计算当前日期 -1
					new Date(this.departDate).getTime() - 24 * 60 * 60 * 1000
				);
				this.departDate = this.getDate(odata); //格式化日期并赋值
				this.form.departDate = this.departDate
				this.array = []
				this.reserveMask(this.form)
				this.timeDate(this.departDate)
			},

			nextDate() {
				//后一天
				let odata = new Date(
					new Date(this.departDate).getTime() + 24 * 60 * 60 * 1000
				); //计算当前日期 +1
				this.departDate = this.getDate(odata); //格式化日期并赋值
				this.form.departDate = this.departDate
				this.array = []
				this.reserveMask(this.form)
				this.timeDate(this.departDate)
			},
			getDate(date) {
				var date = new Date(date);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month < 10 ? "0" + month : month; //月小于10，加0
				day = day < 10 ? "0" + day : day; //day小于10，加0
				return `${year}-${month}-${day}`;
			},

			reserveMask(e) {
				var that = this
				let objP = {
					departDate: e.departDate,
					startStation: e.starpion,
					endStation: e.endpion
				}
				const obj = {
					url: 'ddPlandate/findEventDetails',
					data: objP,
					success(res) {
						that.array = res.datas

					},
					fail(res) {

					},
					complete(res) {}
				}
				that.getData(obj)
			},
		}
	}
</script>

<style scoped lang="scss">
	.natos {
		font-size: 28upx;
		height: 65upx;
		line-height: 65upx;
		background-color: #fff;
		display: flex;
		align-items: center;

		.natos1 {
			flex: none;
			width: 160upx;
			text-align: center;
		}

		.natos2 {
			flex: 1;
			text-align: center;

			.boxAys_1x {
				font-weight: 500;
				font-size: 38upx;
			}
		}

	}


	.right .center-right {
		border: 1px solid #3478f6;
		float: right;
		text-align: center;
		border-radius: 8rpx;
		color: #3478f6;
	}

	.view-schItem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 100rpx;
		align-items: center;
		border-bottom: 1px solid #e4e4e4;
	}

	.view-sch {
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.inner-vie {
		width: 20%;
	}

	.btn-item {
		width: 100%;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		justify-self: flex-end;
		color: #682e09;
		background-color: #fff;
		border: 1px solid #682e09;
	}

	.txt-nm {
		width: 40%;
		font-size: 28rpx;
		text-align: left;
	}

	.txt-del {
		width: 20%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-size: 28rpx;
		line-height: 46rpx;
	}

	.center-right {
		display: flex;

		font-size: 28upx;
	}

	.home_2y {
		background-color: #fff;
		padding: 25upx 25upx;
		border-radius: 16upx;
		overflow: hidden;
		margin: 0 25upx;
		margin-bottom: 25upx;
		position: relative;

		.pingche {
			color: #fff;
			font-size: 22upx;
			margin-left: auto;
			background-color: #4374eb;
			height: 40upx;
			position: absolute;
			right: -50upx;
			top: 20upx;
			transform: rotate(45deg);
			width: 180upx;
			line-height: 40upx;
			text-align: center;
		}

		.home_2y_1 {
			font-size: 30upx;
			font-weight: 500;
			color: #333;
			display: flex;
			align-items: center;

			.iconzhuanhuan {
				margin: 0 10upx;
			}


		}

		.home_2y_2 {
			display: flex;
			align-items: center;
			height: 50upx;

			.home_2y_2_1 {
				width: 16upx;
				height: 16upx;
				background: #61d34e;
				border-radius: 50%;
				border: 6upx solid #dff6dc;
				margin-right: 10upx;
			}

			.home_2y_2_2 {
				font-size: 32upx;
				color: #000;
				font-weight: 500;
			}
		}

		.home_2y_3 {
			display: flex;
			align-items: center;

			.home_2y_3x {
				font-weight: 500;
				font-size: 26upx;
				color: #333;
				margin-right: auto;
			}

			.home_2y_3y {
				display: flex;
				align-items: center;

				.home_2y_3y_1 {
					font-size: 28upx;
					color: #ea332a;
					font-weight: 600;
				}

				.home_2y_3y_2 {
					font-size: 36upx;
					color: #ea332a;
					font-weight: 600;
					margin: 0 6upx;
				}


			}
		}
	}
</style>